<template>
  <div class="department-content">
    <el-card class="tree-card">
      <!-- <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
        <el-col>
          <span>人力资源管理系统</span>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="end">
            <el-col>负责人</el-col>
            <el-col>
              <el-dropdown>
                <span>
                  操作<i class="el-icon-arrow-down" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row> -->
      <tree-tools :tree-node="company" :is-root="true"></tree-tools>
      <!-- default-expand-all是否展开所有节点 -->
      <el-tree :data="departs" :props="defaultProps">
        <!-- 传入内容。插槽内容，会循环多次，有多少个节点循环多少次 -->
        <!-- 作用域插槽 slot-scope="obj" 接受传递给插槽的数据， data每个节点的数据对象 -->
        <!-- <el-row slot-scope="{ data }" type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%">
          <el-col>
            <span>{{ data.name }}</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <el-col>{{ data.manager }}</el-col>
              <el-col>
                <el-dropdown>
                  <span>操作<i class="el-icon-arrow-down"></i></span>
                  <el-dropdown-menu>
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                    <el-dropdown-item>编辑部门</el-dropdown-item>
                    <el-dropdown-item>删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row> -->
        <!-- 执行顺序：执行slot-scope的赋值，再执行props的传值 -->
        <tree-tools slot-scope="{ data }" :tree-node="data"></tree-tools>
      </el-tree>
    </el-card>
  </div>
</template>

<script>
import treeTools from './components/tree-tools'
import { getDepartments } from '@/api/departments'
export default {
  data() {
    return {
      company: { name: '人力资源管理系统', manager: '负责人' },
      defaultProps: { label: 'name' }, // 表示显示这个属性的值
      departs: [{ name: '总裁办', manager: '曹操', children: [{ name: '董事会', manager: '行三' }] },
      { name: '行政部', manager: '刘备' },
      { name: '人事部', manager: '孙权' }]
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      const result = await getDepartments()
      this.company = { name: result.companyName, manager: '负责人' }
      this.departs =  result.departs // 需要转换成树形结构
      console.log(result)
    }
  },
  components: {
    treeTools
  }
}
</script>

<style lang='scss' scoped>
.tree-card {
  padding: 20px 0;
  font-size:14px;
}
</style>
